function initEcharts(dom) {
    let temp = echarts.init(dom, "dark");
    return temp;
}

//获取D页面关联的jQuery对象
let leftTop = $("#left-top");
let leftBottom = $("#left-bottom");
let cov19Map=$("#cov19-map");
let rightTop=$("#right-top");
let rightBottom=$("#right-bottom");


//将echarts和dom对象关联在一起
let leftTopChart = initEcharts(leftTop[0]);
let leftBottomChart = initEcharts(leftBottom[0]);
let cov19MapChart=initEcharts(cov19Map[0]);
let rightTopChart=initEcharts(rightTop[0]);
let rightBottomChart=initEcharts(rightBottom[0]);

async function loadLeftData() {

    //配置echarts的配置项
    leftTopChart.setOption({
        title: {
            text: ''
        },
        tooltip: {},
        legend: {

        },
        xAxis: {
            type: "category"
        },
        yAxis: {},
        series: [
            {
                name: '新增确诊',
                type: 'line',

            },
            {
                name: '治愈',
                type: 'line',

            }, {
                name: '死亡',
                type: 'line',

            }
        ]
    });

    leftBottomChart.setOption({
        title: {
            text: ''
        },
        tooltip: {},
        legend: {

        },
        xAxis: {
            type: "category"
        },
        yAxis: {},
        series: [
            {
                name: '新增确诊',
                type: 'line',

            },
            {
                name: '新增疑似',
                type: 'line',

            }, {
                name: '新增境外输入',
                type: 'line',

            }
        ]
    });



    let res=await $.ajax({
        url:"https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list",
        method:"post",
        data:{
            modules:"chinaDayList,chinaDayAddList,cityStatis,nowConfirmStatis,provinceCompare"
        },
        dataType:"json"

    }).promise();
    // console.log(res);
    let ars=[];//左上角的数据
    let arrs=[];//左下角的数据
    let li=res.data.chinaDayList;//数组
    li.forEach(function(item,index){
        ars.push({
            name:item.date,
            nowConfirm:item.nowConfirm,
            heal:item.heal,
            dead:item.dead
        });
    });
    let list=res.data.chinaDayAddList;
    list.forEach(function(item,index){
        arrs.push({
            name:item.date,
            confirm:item.confirm,
            suspect:item.suspect,
            importedCase:item.importedCase
        });
    });


    //填充数据（填充左上角的数据）
    leftTopChart.setOption({
        dataset:{
            source:ars
        },
        yAxis:{
            axisLabel:{
                formatter: function (value) {
                    let num=parseInt(value/1000);
                    return  num>0?num+"K":value;
                }
            }
        }
    });
   

       //填充数据（填充左下角的数据）
       leftBottomChart.setOption({
        dataset:{
            source:arrs
        },
        yAxis:{
            axisLabel:{
               
            }
        }
    });



}
loadLeftData();

//初始化地图
cov19MapChart.setOption({
    tooltip:{
        formatter:"{b}<br>累计确诊:{c}"
    },

    //视觉映射
    visualMap: {
        type:'piecewise',
        text:["人数"],
        showLabel:true,
        textStyle:{
            color:"#fff"
        },
        bottom:"30px"
      
    },
    series:[{
        type:"map",
        map:"china",
        label:{//地图上显示的一些文本信息
            show:true
        },
     
    }]
});

//初始化柱状图
rightTopChart.setOption({
    legend:{

    },
    tooltip:{

    },
    xAxis: { type: 'category' },
    yAxis: {
        axisLabel:{
            formatter:function(v){
                let num=parseInt(v/1000);
                return num>0?num+"K":v;
            }
        }
    },
    series: [
        { type: 'bar' }, 
        { type: 'bar' }, 
        { type: 'bar' }
    ]
});

//初始化饼图
rightBottomChart.setOption({
    tooltip: {
               
    },
    legend: {
       
    },
    series: [
        {
            name: "境外输入",
            type: "pie",
            left:10,
            radius:[0,100],//数组的第一项是内半径，第二项是外半径
            center:[200,180],//圆心坐标
         
           
        }
    ]
});


async function loadData(){
    
    // https://voice.baidu.com/api/newpneumonia?from=page&callback=jsonp_1661034366228_74305
    const URL="https://voice.baidu.com/api/newpneumonia";
    let res=await $.ajax({
        url:URL,
        data:{
            from:"page"
        },
        dataType:"jsonp"
    }).promise();
    console.log(res);
    let provinces=res.data.caseList;//获取中国所有的省份对象
    //构建地图的数据结果
    let mapData=[];

    //构建省事疫情统计数据
    let provinceData=[];

    //构建境外输入统计
    let overSea=[];

    provinces.forEach(function(item,index){
        mapData.push({
            name:item.area,
            value:item.confirmed
        });
        provinceData.push({
            name:item.area,
            "确诊":item.confirmed,
            "死亡":item.died,
            "治愈":item.crued
        });
        overSea.push({
            name:item.area,
            value:item.overseasInputRelative
        });
    });
   

    //渲染地图
    cov19MapChart.setOption({
      
    
        //视觉映射
        visualMap: {
            pieces: [
                {min: 100000}, 
                {min: 10000, max: 100000},
                {min: 1000, max: 10000},
                {min: 100, max: 1000},
                {min:0,max:100}
               
            ]
        },
        series:[{
           data:mapData
        }]
    });

    //渲染右上角的柱状图
    let proi=5;
    let nowData=provinceData.slice(0,proi);
    setInterval(function(){
        if(proi==33){
            proi=0;
        }else{
            proi=proi+1;
        }
       
        nowData.shift();//删除数组中的第一个元素
        nowData.push(provinceData[proi]);//删除完后添加一个元素
        rightTopChart.setOption({
            dataset:{
                source:nowData
            }
        });
    },800);

    //渲染右下角的图
    overSea.sort(function(a,b){
        return b.value*1-a.value*1;
    });
    overSea.length=5;
    console.log(overSea);

    rightBottomChart.setOption({
        dataset:{
            source:overSea
        }
    });

}
loadData();



window.onresize=function(){
    leftBottomChart.resize();
    leftTopChart.resize();
    cov19MapChart.resize();
    rightTopChart.resize();
    rightBottomChart.resize();
};